<template>
    <view class="auth">
        <view class="base">
            <view class="row flex_b">
                <view class="label">姓名</view>
                <view class="value">
                    <up-input inputAlign="right" placeholder="请输入你的真实姓名" border="none" v-model="form.nickname">
                    </up-input>
                </view>
            </view>
            <view class="row flex_b">
                <view class="label">手机号码</view>
                <view class="value">
                    <up-input inputAlign="right" type="number" placeholder="请输入手机号码" border="none"
                        v-model="form.userMobile">
                    </up-input>
                </view>
            </view>
            <view class="row flex_b">
                <view class="label">关注公众号</view>
                <view class="value" @click="tofficial">
                    <view v-if="!checkMemberMpResult" style="color: #fe6e04">前往关注</view>
                    <view v-else>已关注</view>
                </view>
            </view>
            <view class="tips">
                <text style="color: red;">*</text>
                请填写真实姓名和手机号码，方便能平台和客户能与及时与您获得联系。
            </view>
        </view>
        <view class="base" style="padding: 24rpx;">
            <view class="title">身份认证</view>
            <view class="row flex_b">
                <view class="label">身份证号</view>
                <view class="value">
                    <up-input inputAlign="right" type="idcard" placeholder="请输入身份证号" border="none"
                        v-model="form.idNumber">
                    </up-input>
                </view>
            </view>
            <view class="row flex_b">
                <view class="label">选择身份证有效期</view>
                <view class="value flex_r">
                    <view style="margin-right: 12rpx;">是否长期</view>
                    <up-switch size="22" inactiveColor="#F2F2F2" activeColor="#FE6E04" v-model="isMax"></up-switch>
                </view>
            </view>
            <view class="row flex_b">
                <view class="date_range flex_c">
                    <view @click="showSelectCertBeginDate = true">
                        <up-input style="width: 250rpx;" inputAlign="center" v-model="form.certBeginDate" disabled
                            disabledColor="#ffffff" placeholder="请选择开始时间" border="none"></up-input>
                    </view>
                    <view style="width: 50rpx;text-align: center;">至</view>
                    <view @click="showSelectCertEndDate = true" v-if="!isMax">
                        <up-input style="width: 250rpx;" inputAlign="center" v-model="form.certEndDate" disabled
                            disabledColor="#ffffff" placeholder="请选择结束时间" border="none"></up-input>
                    </view>
                    <view v-else>
                        <up-input style="width: 250rpx;" inputAlign="center" modelValue="长期" disabled
                            disabledColor="#ffffff" placeholder="请选择结束时间" border="none"></up-input>
                    </view>
                </view>
            </view>
            <view class="tips">
                <text style="color: red;">*</text>
                请填写本人身份证号，身份证号必须是18位，且与您的身份证上的信息一致，确保保险信息能成功录入。
            </view>
        </view>
        <view class="bottom_btn">
            <view class="btn flex_c" @click="submit">确定</view>
        </view>
    </view>
    <!-- 选择身份证有效期(开始) -->
    <u-datetime-picker ref="datetimePickerRef" :minDate="-631180800000" :maxDate="new Date().getTime()"
        :formatter="formatter" :show="showSelectCertBeginDate" v-model="certBeginDate" mode="date"
        confirmColor="#FE6E04" @cancel="showSelectCertBeginDate = false"
        @confirm="confirmSelectCertBeginDate"></u-datetime-picker>
    <!-- 选择身份证有效期(结束) -->
    <u-datetime-picker ref="datetimePickerRef2" :minDate="new Date().getTime()" :maxDate="2524579200000"
        :formatter="formatter" :show="showSelectCertEndDate" v-model="certEndDate" mode="date" confirmColor="#FE6E04"
        @cancel="showSelectCertEndDate = false" @confirm="confirmSelectCertEndDate"></u-datetime-picker>
</template>

<script setup lang="ts">
import { checkMemberMp, getMemberInfo, updateMemberInfo } from '@/api/mine/userInfo';
import { useMemberStore } from '@/stores';
import type { MemberInfo } from '@/types';
import { checkChineseName, checkIdCard, checkPhone } from '@/utils/Validate';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import { getTimeDetial } from '@/utils';
const { setMemberInfo } = useMemberStore()

const form = reactive<MemberInfo>({
    nickname: "",
    avatar: '',
    userMobile: '',
    sex: '',
    idNumber: '',
    idNumberFrontImage: '',
    idNumberBackImage: '',
    bankCardNumber: '',
    bankCardImage: '',
    certBeginDate: '',
    certEndDate: ''
})
onShow(() => {
    checkMemberMpRes()
})
onLoad(() => {
    getMember()
})
// 查询是否关注公众号
const checkMemberMpResult = ref(false)
const checkMemberMpRes = async () => {
    const res: any = await checkMemberMp()
    if (res.code == 0 && res.data) {
        checkMemberMpResult.value = res.data
    }
}
// 获取用户个人信息
const getMember = () => {
    getMemberInfo().then((res: any) => {
        if (res.code == 0 && res.data) {
            setMemberInfo(res.data)
            const data = res.data
            form.avatar = data.avatar
            form.sex = data.sex
            form.idNumber = data.idNumber
            form.certBeginDate = data.certBeginDate
            form.certEndDate = data.certEndDate
            form.idNumberFrontImage = data.idNumberFrontImage
            form.idNumberBackImage = data.idNumberBackImage
            form.bankCardNumber = data.bankCardNumber
            form.bankCardImage = data.bankCardImage
            form.userMobile = data.userMobile ?? data.mobile
            if (!checkChineseName(data.nickname)) {
                form.nickname = ''
            } else {
                form.nickname = data.nickname
            }
        }
    })
}
// 选择身份证有效期
const formatter = (type: any, value: any) => {
    if (type === 'year') {
        return `${value}年`;
    }
    if (type === 'month') {
        return `${value}月`;
    }
    if (type === 'day') {
        return `${value}日`;
    }
    return value;
};
// 选择开始时间
const showSelectCertBeginDate = ref(false)
const certBeginDate = ref(new Date().getTime())
const confirmSelectCertBeginDate = (e: any) => {
    const { year, month, day } = getTimeDetial(e.value)
    form.certBeginDate = `${year}${month}${day}`
    showSelectCertBeginDate.value = false
}
// 选择结束时间
const showSelectCertEndDate = ref(false)
const certEndDate = ref(new Date().getTime())
const isMax = ref(false)
const confirmSelectCertEndDate = (e: any) => {
    const { year, month, day } = getTimeDetial(e.value)
    form.certEndDate = `${year}${month}${day}`
    showSelectCertEndDate.value = false
}
const submit = async () => {
    // 校验是否关注公众号
    if (!checkMemberMpResult.value) {
        uni.showModal({
            title: '请先关注公众号',
            content: '关注公众号可获得更详细的服务',
            showCancel: true,
            success: (res) => {
                if (res.confirm) {
                    uni.navigateTo({
                        url: '/pages/mine/official/official'
                    })
                }
            }
        })
        return
    }

    // 校验姓名
    if (!checkChineseName(form.nickname)) {
        uni.showToast({
            title: '请输入正确的姓名',
            icon: 'none'
        })
        return
    }
    // 校验手机号
    if (!checkPhone(form.userMobile)) {
        uni.showToast({
            title: '请输入正确的手机号',
            icon: 'none'
        })
        return
    }
    // 校验身份证号
    if (!checkIdCard(form.idNumber as string)) {
        uni.showToast({
            title: '请输入正确的身份证号',
            icon: 'none'
        })
        return
    }
    // 校验身份证有效期
    if (!form.certBeginDate) {
        uni.showToast({
            title: '请选择身份证有效期',
            icon: 'none'
        })
        return
    }
    if (!isMax && !form.certEndDate) {
        uni.showToast({
            title: '请选择身份证有效期',
            icon: 'none'
        })
        return
    }
    try {
        uni.showLoading({
            title: '修改中...',
            mask: true
        })
        const res: any = await updateMemberInfo(form)
        if (res.code == 0 && res.data == 'ok') {
            uni.showToast({
                title: '修改成功'
            })
            await setMember()
            uni.hideLoading()
            setTimeout(() => {
                uni.navigateBack({ delta: 1 })
            }, 500)
        } else {
            uni.hideLoading()
            uni.showToast({
                title: res.data,
                icon: 'none'
            })
        }

    } catch (error) {
        uni.hideLoading()
        console.log(error)
        uni.showToast({
            title: '操作失败',
            icon: 'none'
        })
    }
}
// 更新用户个人信息
const setMember = async () => {
    const res: any = await getMemberInfo()
    if (res.code == 0 && res.data) {
        setMemberInfo(res.data)
    }
}
// 关注公众号
const tofficial = () => {
    uni.navigateTo({
        url: '/pages/mine/official/official'
    })
}
</script>

<style lang="scss" scoped>
.auth {
    min-height: 100vh;
    background: #f8f8f8;
    overflow: hidden;
}

.base {
    width: 698rpx;
    padding: 0 24rpx 28rpx 24rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin: 0 auto;
    margin-top: 24rpx;
    box-sizing: border-box;
}

.bottom_btn {
    width: 750rpx;
    height: 198rpx;
    background: #ffffff;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;

    .btn {
        width: 650rpx;
        height: 80rpx;
        background: #fe6e04;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        font-weight: 700;
        font-size: 32rpx;
        color: #ffffff;
        margin: 0 auto;
        margin-top: 36rpx;
    }
}

.row {
    width: 100%;
    height: 96rpx;
    border-bottom: 2rpx solid #f8f8f8;

    .label {
        width: 228rpx;
        font-weight: 700;
        font-size: 28rpx;
        color: #222222;

        .label_tips {
            font-size: 24rpx;
            color: #888888;
        }
    }

    .value {
        max-width: calc(100% - 228rpx);
        font-size: 28rpx;
    }
}

.tips {
    font-size: 24rpx;
    color: #888888;
    margin-top: 8rpx;
}
</style>